<script lang="ts" setup>
import { ref } from 'vue';
import CategoryResult from '~/components/CategoryResult.vue';
import { type Category, categoryApi } from '~/utils/api/category-api';
import type { Article } from '~/utils/api/article-api';

definePageMeta({
	layout: 'header-content-footer',
});

// -------- 通过路由获取要查询的分类id --------
const route = useRoute();
const categoryId = Number(route.params.id);

// -------- 查询分类信息 --------
const category = ref<Category>();
const categoryInfo = await categoryApi.getCategoryInfoServer(categoryId);
category.value = categoryInfo.data.value?.data;

// -------- 查询分类下的文章文章 --------
const articleList = ref<Article[]>([]);
const categoryArticleList = await categoryApi.getCategoryArticleServer(categoryId);
articleList.value = categoryArticleList.data.value?.data || [];
</script>

<template>
	<div class="flex items-center flex-col">
		<CategoryResult
			v-if="category"
			:article-list="articleList"
			:category="category"
		/>

		<!--		<Pagination -->
		<!--			v-slot="{ page }" -->
		<!--			:total="50" -->
		<!--			:sibling-count="1" -->
		<!--			:items-per-page="10" -->
		<!--			show-edges -->
		<!--			:default-page="1" -->
		<!--			class="my-[3.125rem]" -->
		<!--		> -->
		<!--			<PaginationList -->
		<!--				v-slot="{ items }" -->
		<!--				class="flex items-center gap-1" -->
		<!--			> -->
		<!--				<PaginationPrev /> -->

		<!--				<template v-for="(item, index) in items"> -->
		<!--					<PaginationListItem -->
		<!--						v-if="item.type === 'page'" -->
		<!--						:key="index" -->
		<!--						:value="item.value" -->
		<!--						as-child -->
		<!--					> -->
		<!--						<Button -->
		<!--							class="w-10 h-10 p-0" -->
		<!--							:variant="item.value === page ? 'default' : 'outline'" -->
		<!--						> -->
		<!--							{{ item.value }} -->
		<!--						</Button> -->
		<!--					</PaginationListItem> -->
		<!--					<PaginationEllipsis -->
		<!--						v-else -->
		<!--						:key="item.type" -->
		<!--						:index="index" -->
		<!--					/> -->
		<!--				</template> -->

		<!--				<PaginationNext /> -->
		<!--			</PaginationList> -->
		<!--		</Pagination> -->
	</div>
</template>

<style scoped>

</style>
